<template>
	<div class="rightslider">
		<!-- 页面配置 -->
		<div v-if="($rightcom=='decorate')">
			<!-- <component :is="$rightcom" :datas="$currentproperties" /> -->
			<decorate :datas="$currentproperties"></decorate>
		</div>
		<!-- 组件配置 -->
		<div v-if="!($rightcom=='decorate')">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h5>
						<el-icon v-if="$currentComponent.icon">
							<component :is="$currentComponent.icon" />
						</el-icon>
						<i class="iconfont" :class="$currentComponent.customIcon"
							v-else-if="$currentComponent.customIcon" />
						<!-- <van-icon :name="element.vanIcon" v-else /> -->
						<span style="margin-left: 10px;">{{ $currentComponent.text}}</span>

						<!-- <i class="iconfont" :class="$currentComponent.icon" v-if="$currentComponent.icon" /> -->
						<!-- <van-icon :name="$currentComponent.vanIcon" v-else /> -->
					</h5>
				</el-breadcrumb-item>
			</el-breadcrumb>
			<el-divider></el-divider>

			<el-tabs v-model="activeName">
				<el-tab-pane label="组件属性" name="1">
					<keep-alive>
						<component :is="$rightcom"></component>
					</keep-alive>

				</el-tab-pane>
				<el-tab-pane label="通用样式" name="2">
					<commonstyle></commonstyle>
				</el-tab-pane>

				<el-tab-pane label="高级功能" name="3">用户管理</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	}
	from 'vuex'

	export default {
		name: 'rightslider',
		props: {
			// parentComponent: Object
		},
		computed: {
			...mapState(['$pageSchema', '$rightcom', '$leftcom', '$currentproperties', '$currentComponent'])
		},
		watch: {
			/* 监听右侧属性设置切换 */
			$currentComponent(newval) {
				this.activeName = "1"
			},

		},
		data() {
			return {
				activeName: '1'
			}
		},
		methods: {


		},
	}
</script>

<style scoped lang="scss">
	/* 组件 */
	.rightslider {
		padding-top: 10px;

		::v-deep .el-divider--horizontal {
			margin-bottom: 0px;
			margin-top: 10px;
		}
	}
</style>